<template>
    <div id="late-div" class="late-div"></div>
    <div class="head-wrap">
        <div class="head-content">
            <div class="logo_wrap">
                <router-link to="/" class="logo"></router-link>
                <!-- <div class="name">能量租赁</div> -->
            </div>
            <div class="dc">
                <div class="Wallet-box">
                    <div
                        @click="sendAccount"
                        v-if="!userAddr"
                        class="linkAddress"
                    >
                        {{ $t("layout.linkWallet") }}
                    </div>
                    <div class="address" v-else>
                        {{ userAddr }}
                    </div>
                </div>
                <div class="right">
                    <div class="menu" @click="$refs.menuRefs.setat.open = true">
                        <svg
                            t="1728147283366"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2356"
                            width="200"
                            height="200"
                        >
                            <path
                                d="M170.666667 213.333333h682.666666v85.333334H170.666667V213.333333z m0 512h682.666666v85.333334H170.666667v-85.333334z m0-256h682.666666v85.333334H170.666667v-85.333334z"
                                p-id="2357"
                            ></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <app-menu ref="menuRefs" />
    <van-sticky :offset-top="0" @change="changesticky">
        <div class="head2-warp" :class="{ sticky: isSticky }">
            <div class="head-content">
                <div class="left">
                    <a href="/" class="logo">
                        <div class="logoimg"></div>
                        <!-- <div class="name">TronBank</div> -->
                    </a>
                    <div class="menu">
                        <template v-for="(item, i) in menuList">
                            <div
                                class="row"
                                v-if="
                                    item.title != 'dao' &&
                                    item.title != 'leader' &&
                                    item.title != 'workshop'
                                "
                            >
                                <router-link :to="item.name" class="title">
                                    <!-- <img :src="item.img" alt="" srcset=""> -->
                                    {{ $t("menu." + item.title) }}</router-link
                                >
                            </div>
                        </template>
                        <div class="row">
                            <a
                                href="https://t.me/TronBankPro1"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <!-- <img src="@/assets/image/_img37.png" alt="" srcset=""> -->
                                {{ $t("menu.service") }}</a
                            >
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="Wallet-box">
                        <div
                            @click="sendAccount"
                            v-if="!userAddr"
                            class="linkAddress"
                        >
                            {{ $t("layout.linkWallet") }}
                        </div>
                        <div class="address" v-else>
                            {{ userAddr }}
                        </div>
                    </div>

                    <app-language ref="language" />
                </div>
            </div>
        </div>
    </van-sticky>
</template>
<script lang="ts">
import { defineComponent, onMounted, computed, nextTick, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { UserModule } from "@/store/modules/user";
import { AppModule } from "@/store/modules/app";
import { i18n, vantLocales } from "@/i18n/index";
import { getAssetsFile } from "@/utils/pub-use";
import "@/utils/pollWeb3";
import { TronLinkAdapter } from "@tronweb3/tronwallet-adapters";
export default defineComponent({
    setup() {
        const { t } = useI18n();
        const router = useRouter();
        const currentRouteName = computed(() => router.currentRoute.value.name);
        const menuList = ref([
            {
                title: "website",
                name: "/website",
                img: getAssetsFile("_img33.png"),
            },
            {
                title: "index",
                name: "/index",
                img: getAssetsFile("_img34.png"),
            },
            {
                title: "stake",
                name: "/stake",
                img: getAssetsFile("_img35.png"),
            },
            {
                title: "node",
                name: "/node",
                img: getAssetsFile("_img36.png"),
            },
            {
                title: "Trade",
                name: "/swap",
                img: getAssetsFile("_img36.png"),
            },
        ]);
        const sendAccount = async () => {
            if (typeof window.tronWeb !== "undefined") {
                try {
                    const adapter = new TronLinkAdapter();
                    await adapter.connect();
                    UserModule.SET_USERADDR(
                        window.tronWeb.defaultAddress.base58 as string
                    );
                } catch (error: any) {
                    showToast(error);
                }
            } else {
                showToast(t("layout.dappBrowser"));
            }
        };
        const toggleLanguage = async () => {
            if (AppModule.language === "zh") {
                i18n.global.locale = "en";
            } else {
                i18n.global.locale = "zh";
            }
            vantLocales(i18n.global.locale);
            AppModule.toggleLanguage(i18n.global.locale);
        };
        const userAddr = computed(() => {
            if (UserModule.userAddr) {
                var subStr1 = UserModule.userAddr.substr(0, 5);
                var subStr2 = UserModule.userAddr.substr(
                    UserModule.userAddr.length - 5,
                    5
                );
                var subStr = subStr1 + "..." + subStr2;
                return subStr;
            } else {
                return "";
            }
        });
        const onClickLeft = () => history.back();
        let Inval;
        const getWalletAddress = (callback) => {
            setTimeout(() => {
                let addr = window.tronWeb.defaultAddress.base58
                    ? window.tronWeb.defaultAddress.base58
                    : "";
                //当获取到地址的时候就关掉定时器
                if (addr) {
                    console.log("1111");
                    callback(addr);
                } else {
                    Inval = setInterval(() => {
                        console.log("222");
                        window.tronWeb.fromSun;
                        let addr = window.tronWeb.defaultAddress.base58
                            ? window.tronWeb.defaultAddress.base58
                            : "";
                        if (addr) {
                            window.clearInterval(Inval);
                            callback(addr);
                        }
                    }, 1000);
                }
            }, 500);
        };
        const isSticky = ref(false);
        const changesticky = (el) => {
            isSticky.value = el;
        };

        onMounted(() => {
            setTimeout(() => {
                nextTick(async () => {
                    sendAccount();
                    getWalletAddress((accounts) => {
                        if (!accounts) {
                            showToast(t("layout.binanceChainNetwork"));
                        } else {
                            UserModule.SET_USERADDR(accounts as string);
                        }
                    });
                });
            }, 500);
            if (window.tronWeb) {
                window.tronWeb.on("addressChanged", (injectedProvider) => {
                    UserModule.SET_USERADDR(injectedProvider.base58 as string);
                });
            }
        });
        return {
            sendAccount,
            toggleLanguage,
            onClickLeft,
            userAddr,
            AppModule,
            getAssetsFile,
            menuList,
            changesticky,
            isSticky,
            currentRouteName,
        };
    },
});
</script>
<style lang="less" scoped>
.head-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: 0.3s;
    z-index: 9;
    // background: #fff;
    box-shadow: 0px 4px 4px 0px rgba(235, 0, 41, 0.1);
    @media (min-width: 1100px) {
        display: none;
    }

    .head-content {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 15px;

        .logo_wrap {
            flex: 1;
            display: flex;
            align-items: center;

            .logo {
                display: inline-block;
                width: 158px;
                height: 28.727px;
                background: url("@/assets/logo2.png") center/cover no-repeat;
            }

            .name {
                margin-left: 8px;
                width: 60px;
                color: #fff;
                font-size: 13px;
                font-weight: bold;
            }
        }
        .Wallet-box {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 110px;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 30px;
            background: #eb0029;
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            white-space: nowrap;
            .address {
            }
            .linkAddress {
            }
        }

        .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .menu {
                margin-left: 8px;
                display: flex;
                align-items: center;
                svg {
                    width: 30px;
                    height: auto;
                    color: #eb0029;
                    fill: #eb0029;
                }
            }
        }
    }
}
.head2-warp {
    position: absolute;
    left: 0;
    right: 0;
    padding: 22px 45px;
    display: none;
    z-index: 9;

    @media (min-width: 1100px) {
        display: block;
    }

    &.sticky {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: saturate(200%) blur(20px);
    }
    .head-content {
        display: flex;
        justify-content: space-between;
        max-width: 1560px;
        margin: 0 auto;
        .left {
            display: flex;
            align-items: center;
        }
        .logo {
            display: flex;
            align-items: center;
            .logoimg {
                width: 198px;
                height: 36px;
                flex-shrink: 0;
                background: url("@/assets/logo2.png") no-repeat;
                background-position: center;
                background-size: contain;
            }
            .name {
                margin-left: 8px;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                color: #fff;
            }
        }
        .menu {
            margin-left: 84px;
            display: flex;
            align-items: center;
            a {
                position: relative;
                margin-right: 40px;
                position: relative;
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 16px;
                color: #000;
                word-wrap: break-word; /* 允许在长单词中间换行 */
                word-break: break-all; /* 允许任意位置的单词断开 */

                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 9px;
                }
                &.router-link-active {
                    // color: rgba(133, 160, 225, 1);
                    // &::before {
                    //     background-image: url("@/assets/image/image7.png");
                    // }
                    color: rgba(235, 0, 41, 1);
                    font-weight: 700;
                    &::after {
                        display: none;
                        content: "";
                        position: absolute;
                        bottom: -12px;
                        left: 0;
                        right: 0;
                        width: 28px;
                        height: 4px;
                        margin: 0 auto;
                        background: #0055ff;
                        border-radius: 16px 16px 0px 0px;
                    }
                }
            }
        }
    }
    .Wallet-box {
        margin-right: 32px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 110px;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        background: #eb0029;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        cursor: pointer;

        .address {
        }
        .linkAddress {
        }
    }
    .language {
        // margin-left: 32px;
        cursor: pointer;
        svg {
            color: #eb0029;
            fill: #eb0029;
            width: 30px;
        }
    }
    .right {
        display: flex;
        align-items: center;
    }
}
.van-nav-bar {
    margin-bottom: 15px;

    &:deep(.van-nav-bar__text) {
        color: rgba(31, 33, 32, 1);
    }

    &:deep(.van-icon) {
        color: rgba(31, 33, 32, 1);
    }
}
.late-div {
    &:deep(.van-overlay) {
        background: transparent;
    }
}
</style>
